<template>
     <div class="common-layout">
      <NavTop></NavTop>
    <el-container>
      <el-aside width="200px"><nav-left @handle="handle" background-color="grey"></nav-left></el-aside>
      <el-container>
        <el-header height="200px"><Swiper></Swiper></el-header>
        <el-main><List :data="data"></List></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
//@符号代表当前文件夹
import NavTop from '@/components/NavTop.vue';
import NavLeft from './components/NavLeft.vue';
import Swiper from './components/Swiper.vue';
import List from './components/List.vue';
import{ref,onMounted} from 'vue'
import axios from 'axios'
const data = ref([])
onMounted(()=>{
    axios.get('/public/goodslist.json').then((res)=>{
        sessionStorage.setItem("goodslist",JSON.stringify(res.data.goodslist))//把获取商品数据放到session里
        //JSON.stringify是吧javascript对象转换成json字符串
        data.value = JSON.parse(sessionStorage.getItem('goodslist'))
    })
})
const handle =(val)=>{
  data.value = JSON.parse(sessionStorage.getItem('goodslist')).filter(v=>v.cid==val)
}
</script>

<!-- 如果希望样式只作用于本页面，需要加上scoped -->
<style scoped>
    .el-aside{
        
      background-color:grey
    }
    .el-header{
        --el-header-padding:0;
        height: 500px;
        background-color: grey;
        
    }
    .el-main{
        background-color: grey; 
        /* 垂直100%拉伸 */
        height: calc(100vh);
    }

</style>